<template>
  <div>
    <el-form
      :model="addForm"
      ref="addFormRef"
      :rules="rules"
      label-position="top"
    >
      <el-form-item label="受检人名称" prop="relationName">
        <el-input
          v-model="addForm.relationName"
          placeholder="请点击选择受检人"
          readonly
          disabled
        />
      </el-form-item>
      <el-form-item label="职业" prop="occupation">
        <el-tag :type="addForm.relationName ? 'primary' : 'info'">
          {{ addForm.relationName ? addForm.occupation : "请选择受检人" }}
        </el-tag>
      </el-form-item>
      <el-form-item label="工作环境" prop="workEnvironment">
        <el-tag :type="addForm.relationName ? 'primary' : 'info'">
          {{ addForm.relationName ? addForm.workEnvironment : "请选择受检人" }}
        </el-tag>
      </el-form-item>
      <el-form-item label="用眼距离" prop="eyeDistance">
        <el-tag :type="addForm.relationName ? 'primary' : 'info'">
          {{ addForm.relationName ? addForm.eyeDistance : "请选择受检人" }}
        </el-tag>
      </el-form-item>
      <el-form-item label="检查项目" prop="projectId">
        <el-checkbox-group
          v-model="addForm.projectId"
          class="flex flex-wrap justify-between"
        >
          <el-checkbox
            v-for="item in projectList"
            :key="item.id"
            :label="item.projectName"
            :value="item.id"
            class="w-[49%] m-0 hover:bg-[#f4f4f5]"
          ></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { handleApiResponse } from "@/utils/request.js";
import {
  CreateChecklistInfo,
  ListProjectInfos,
} from "../../../../../wailsjs/go/api/ReportApi.js";

onMounted(() => {
  getProjectList();
  addForm.value = props.detailForm;
});

const emit = defineEmits(["handleBack"]);
const props = defineProps({
  detailForm: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const addFormRef = ref(null);
const addForm = ref({
  relationId: null,
  relationName: "",
  baseRelationId: null,
  baseRelationName: "",
  age: null,
  sex: null,
  phone: "",
  occupation: "",
  workEnvironment: "",
  eyeDistance: "",
  occupation: "",
  projectList: [],
  projectId: [],
});

async function handleSubmit() {
  addFormRef.value.validate((valid) => {
    if (!valid) return;

    emit("handleBack", 1);
    handleApiResponse(() => CreateChecklistInfo(addForm.value)).then((res) => {
      if (res.code == 0) {
        ElMessage.success("创建成功");
        emit("handleBack", res.data);
      } else {
        emit("handleBack", {});
      }
    });
  });
}

const projectList = ref([]);
async function getProjectList() {
  handleApiResponse(() =>
    ListProjectInfos({
      page: 1,
      size: 1234,
      status: 1,
    })
  ).then((res) => {
    if (res.code == 0) {
      projectList.value = res.data.list || [];

      addForm.value.projectId = projectList.value
        .filter((item) => item.isDefmod == 1)
        .map((item) => item.id);
    }
  });
}

const rules = ref({
  relationName: [{ required: true, message: "请选择受检人" }],
  projectId: [{ required: true, message: "请选择检查项目" }],
});

defineExpose({
  handleSubmit,
});
</script>

<style scoped lang="scss">
</style>